<template>
  <div class="student-container">
    <div class="header">
      <StudentHeader />
    </div>
    <div class="navBar">
      <NavBar />
    </div>
    <div class="router-view">
      <router-view v-slot="{ Component }">
        <keep-alive>
          <transition name="slide-fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </keep-alive>
      </router-view>
    </div>
  </div>
</template>
<script lang="ts" setup>
// 顶部展示
import StudentHeader from './components/header.vue'
// 导航栏
import NavBar from './components/navbar.vue'

</script>
<style lang="scss" scoped>
.student-container {
  width: 100%;
  display: grid;
  height: 100%;
  min-height: 100vh;
  grid-template-rows: 6rem 6rem auto;
  position: relative;
  background-color: #E9EEF3;

  .router-view {
    padding: 2rem 15rem;
    height: 100%;
    overflow: auto;
    max-height: calc(100vh - 12rem);
    background: url('http://heww.cn/img/bannerPro.66b1804f.jpg') no-repeat;
    background-size: 20% 20%;
    background-position: 96% 100%;

    /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
    // 滚动条整体部分
    &::-webkit-scrollbar {
      width: 6px;
      height: 8px;
    }

    // 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
    &::-webkit-scrollbar-button {
      display: none;
    }

    // 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
    &::-webkit-scrollbar-thumb {
      background: rgba(144, 147, 153, 0.3);
      cursor: pointer;
      border-radius: 4px;
    }

    // 边角，即两个滚动条的交汇处
    &::-webkit-scrollbar-corner {
      display: none;
    }

    // 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
    &::-webkit-resizer {
      display: none;
    }
  }
}
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all .5s ease;
}

.slide-fade-leave-active {
  transition: all .5s ease;
}

.slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */
{
  transform: translateX(-100px);
  opacity: 0;
}
</style>
